{#继承父模板#}
{% extends 'common/base.html' %}

{% load staticfiles %}

{#标题#}
{% block title %}满分餐厅｜给你满分生活{% endblock title %}

{# 头部Css链接　#}
{% block head_link %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/slider.css' %}" />
{% endblock head_link %}

{# 头部js #}
{% block head_js %}
    <!---strat-slider---->
    <script src="{% static 'js/hover_pack.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/modernizr.custom.28468.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.cslider.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $('#da-slider').cslider({
                autoplay: true,
                bgincrement: 450
            });

            $('.ad_box').delegate('.ad_images','click',function () {
                window.open(this.src);
            })

        });
    </script>
    <!---//end-slider---->
    <script type="text/javascript" src="{% static 'js/jquery.openCarousel.js' %}"></script>
{% endblock head_js %}

{#头部js#}
{% include 'common/head_js.html' %}

{#页面主体#}
{% block body %}




	<div class="slider">
		<div id="da-slider" class="da-slider">

             {% for classify in dish_classify %}
			<div class="da-slide">
				<h1><span class="m_3">{{ classify.classify }}&nbsp;&nbsp;</span>{{ classify.en_classify }}</h1>
				<p>满足你的胃，满足我的心</p>
				<a href="{% url 'dishes:dishes' %}?index={{ classify.id }}" class="da-link">查看更多</a>
			</div>
            {% endfor %}

		</div>
	</div>


	<div class="main">
		<div class="content-top">
			<div class="container">
				<div class="row content_grid1">
					<div class="col-md-4 popular_topics">
						<ul class="topic_grid">
							<li class="list1"><i class="speech"> </i>
								<h3 class="m_3">热门<span class="m_4">菜品</span></h3>
								<div class="clear5"></div>
							</li>

                            {% for dish in dish_hot_4 %}
							<li class="list">
								<a style="float: left;" href="{% url 'dishes:one_dish' %}?id={{ dish.id }}" target="_blank">
									<img src="{% static dish.dish_img %}">
									<span>{{ dish.dish_name }}</span>
								</a>

                                <span class="dish_star glyphicon glyphicon-star"></span>
                                <span class="dish_star glyphicon glyphicon-star"></span>
                                <span class="dish_star glyphicon glyphicon-star"></span>
                                <span class="dish_star glyphicon glyphicon-star"></span>
							</li>
                            {% endfor %}

						</ul>
					</div>
					<div class="col-md-4 popular_topics1">
						<ul class="topic_grid">
							<li class="list1"><i class="book"> </i>
								<h3 class="m_3">餐厅<span class="m_4">故事</span></h3>
								<div class="clear5"></div>
							</li>
						</ul>
						<div class="menu_vertical">
							<section class="accordation_menu">

{#                                最热门三个故事#}


								<div>
									<input id="label-1" name="lida" type="radio" checked/>
									<label for="label-1" id="item1"><i class="ferme"> </i><a href="{% url 'stories:story' %}?id={{ story1.id }}" class="m_5">{{ story1.story_title }}</a><i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									<div class="content" id="a1">
										<ul class="news_list">
											<li class="date">
												{{ story1.update_time.day }}<br><span class="highlight">{{ story1.update_time.month }}月</span><br><span class="light_color">{{ story1.update_time.year }}</span>
											</li>
											<li class="date_desc">
												<a href="{% url 'stories:story' %}?id={{ story1.id }}">{{ story1.story_short }}</a>
											</li>
											<div class="clear"> </div>
										</ul>
									</div>
								</div>


								<div>
									<input id="label-2" name="lida" type="radio" />
									<label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i><a href="{% url 'stories:story' %}?id={{ story2.id }}" class="m_5">{{ story2.story_title }}</a><i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									<div class="content" id="a2">
										<ul class="news_list">
											<li class="date">
												{{ story2.update_time.day }}<br><span class="highlight">{{ story2.update_time.month }}月</span><br><span class="light_color">{{ story2.update_time.year }}</span>
											</li>
											<li class="date_desc">
												<a href="{% url 'stories:story' %}?id={{ story2.id }}">{{ story2.story_short }}</a>
											</li>
											<div class="clear"> </div>
										</ul>
									</div>
								</div>


								<div>
									<input id="label-3" name="lida" type="radio" />
									<label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i><a href="{% url 'stories:story' %}?id={{ story3.id }}" class="m_5">{{ story3.story_title }}</a><i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									<div class="content" id="a3">
										<ul class="news_list">
											<li class="date">
												{{ story3.update_time.day }}<br><span class="highlight">{{ story3.update_time.month }}月</span><br><span class="light_color">{{ story3.update_time.year }}</span>
											</li>
											<li class="date_desc">
												<a href="{% url 'stories:story' %}?id={{ story3.id }}">{{ story3.story_short }}</a>
											</li>
											<div class="clear"> </div>
										</ul>
									</div>
								</div>

							</section>
						</div>
					</div>

{#                活动广告#}
					<div class="col-md-4">
						<ul class="topic_grid">
							<li class="list1"><i class="megaphone"> </i>
								<h3 class="m_3">最新<span class="m_4">活动</span></h3>
								<div class="clear5"></div>
							</li>
						</ul>


						<div class="coursel slide">
							<div class="ocarousel example_info" data-ocarousel-period="6000">

                                <div class="ocarousel_window">
                                    {% for ad in ads %}
									<div class="ad_box">
										<img src="{% static ad.active_img %}" class="img-responsive center-block ad_images">
									</div>
                                    {% endfor %}
								</div>

								<div class="prev_next">
									<a href="javascript:" data-ocarousel-link="left" class="prev"> <i class="prev"> </i></a>
									<a href="javascript:" data-ocarousel-link="right" class="next"> <i class="next"> </i></a>
								</div>

							</div>
						</div>




					</div>
				</div>
			</div>
		</div>

		<div class="content_middle-bottom">
			<div class="container">
				<div class="row" style="text-align: center">

                    {% for classify in dish_classify %}
					<div class="col-lg-3 col-md-3 col-sm-6 bottom_grid1">
						<a href="{% url 'dishes:dishes' %}?index={{ classify.id }}" class="b-link-diagonal b-animate-go  thickbox" target="_blank">
					  	<img src="{% static classify.classify_img %}" class="img-responsive" alt=""/><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="{% static 'images/hover_search.png' %}" alt=""/></h2><p class="b-animate b-from-right b-delay03 "> </p></div></a>
						<div class="grid_desc">
							<h4><a href="{% url 'dishes:dishes' %}?index={{ classify.id }}">{{ classify.classify }}</a></h4>
							<p>{{ classify.classify_desc }}</p>
						</div>
					</div>
                    {% endfor %}

				</div>
			</div>
		</div>

	</div>
	</div>
	
{% endblock body %}